<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
	</head>
	<style>
		.mui-centent{
				width: 100%;
				height: 100%;
				position: absolute;
				background-image: url(../image/tuihguang.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				z-index: 1;
			}
			.gen_one{
				width: 100%;
				
				position:absolute;
				text-align: center;
				bottom: 10%;
			}
			.pen_img{
				width: 100%;
				position: relative;
			    margin: auto;
				text-align: center;
			}
			.pen_img>img{
				margin: auto;
				width:170px;
				height:170px;
				/* text-align: center; */
			}
			.gen_p{
				width: 100%;
				position: relative;
				float: left;
			}
			.gen_p>p:nth-child(1){
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(255,255,255,1);
			}
			.gen_p>p:nth-child(2){
				font-size:18px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(255,208,38,1);
				text-shadow:0px 4px 0px rgba(142,40,8,1);
				-webkit-text-stroke:2px undefined;
				text-stroke:2px undefined;
			}
			.gen_p>p:nth-child(3){
				font-size:13px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(255,255,255,1);
				display: inline-block;
				padding: 5px 10px;
				box-sizing: border-box;
				border: 1px solid greenyellow;
				border-radius: 5px;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a , .mui-title{
				color:rgba(255,255,255,1);
			}
			.mui-bar{
				position: initial;
			}
			
			#imgs{
				width: 200px;
                 height:200px;	
							 position: absolute;
							 z-index: -10;
			}
		</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">分享</h1>
		</header>
		<div class="mui-centent" id="content">
			<div class="gen_one">
				<div class="pen_img" id="pen_img">
					<!-- <img src="../image/minerweima.png"> -->
				</div>
				<div class="gen_p">
					<p>扫描二维码，立刻加入我们！</p>
					<p id="tuiguangma">推广码：123025468</p>
					<p class="fenxiang">点击分享到QQ微信</p>
				</div>
			</div>
		</div>
			　　 <img id="imgs" src="20.png" />

		<script src="../js/mui.js"></script>
		<script src="../js/html2canvas.js"></script>
		<script src="../js/jquery-2.1.4.min.js"></script>
		<script src="../maowenke/qrcode.min.js"></script>
		<script src="../maowenke/plusshare.js"></script>
		<script type="text/javascript">

			mui.plusReady(function(){
				var zhurl = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				
				// mui.alert('haha')
				mui.init({
					beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
						  //refresh是A页面自定义事件
					mui.fire(list, 'refresh');
						 //返回true,继续页面关闭逻辑
					return true;
					},
				});
				
				mui.toast("长按二维码保存图片进行分享")
				$("#tuiguangma").text('推广码：'+user.invitation);
				
				
				var myurl =zhurl+'/juyou/index/indexs?pid='+user.id;
							var qrcode = new QRCode("pen_img",{
								width:170,
								height:170
							});
							qrcode.makeCode(myurl);
							
							 //页面一加载就将页面保存为图片
				html2canvas(document.getElementById('content')).then(function(canvas) {
								var src = canvas.toDataURL();
								// document.body.appendChild(canvas);
					         shangchuantouxiang(src,function(data){
					         $("#imgs").attr("src",data.path)
					         })
					});
					
					mui(document).on('tap','.fenxiang',function(){
						var href = zhurl+"/juyou/index/index/pid/"+user.id;
						// mui.alert(href);
						// return;
						var message = {
							title: "聚友", //应用名字
							content: "聚友同好社区",
							href: href, //分享出去后，点击跳转地址
							thumbs: [zhurl+"/uploads/tuihguang.png"] //分享缩略图
						}
						//调起分享
						mui.post(zhurl+'/juyou/index/fenxiang',{token:user.token},function(res){
							// mui.toast(res.msg);
							
						})
						plusShare(message, function(res) {
							// mui.alert(url)
							//分享回调函数
							if(res) {
								// mui.alert(user.token)
							
								plus.nativeUI.toast("分享成功");
							} else {
								plus.nativeUI.toast("分享失败");
							}
						})
					})
					
					
							
							 //页面一加载将图片上传到服务器
				  function  shangchuantouxiang(path,func){
					  	mui.ajax(zhurl+'/juyou/index/upimgs',{
					  	data:{
					  		file:path
					  	},
					  	dataType:'json',//服务器返回json格式数据
					  	type:'post',//HTTP请求类型
					  	timeout:10000,//超时时间设置为10秒；
					  	success:function(data){
							if(func){
								func(data)
							}
					  	},
					  	error:function(data){
					  	}
					  });
				  }
				  
				  
				          // 长按本页面 保存图片
							mui(document).on("touchstart", ".pen_img", function() {
								var url = $("#imgs").attr("src")
								saveimg(url) 
							})
				
							function saveimg(url) {
							var imgDtask = plus.downloader.createDownload(url,{method:'get'}, function (d,status) {
								                        console.log(d.filename)
														 console.log(status)
							                                        if(status == 200){
							                                            plus.gallery.save(d.filename, function () {//保存到相册
							                                                plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
							                                                // 关闭弹框
							                                                    mui.toast('保存图片成功')
							                                                });
							                    
							                                            })
							                                        }else{
							                                            mui.toast('保存失败')
							                                        }
							                                });
							                                imgDtask.start()
							}
				
			})
		</script>
	</body>

</html>
